<template>
  <div>
    <div v-if="dataList.length">
      <div v-if="TopicType">
        <div class="operate">
          <el-button @click="TopicType = !TopicType">返回</el-button>
        </div>

        <topic :read="true" :answer_id="answer_id" ref="pdfBox" @upData="upData"></topic>
      </div>
      <div v-else class="listBox">
        <el-button class="bo_primary_i" @click="addQuestion">添加问卷</el-button>

        <div class="listItem" v-for="(item, index) in dataList" :key="item.id">
          <div class="left">
            <div class="left_item">
              <div v-if="item.status == 0" class="info">未填写</div>
              <div v-else-if="item.status == 1" class="info info1">填写中</div>
              <div v-else-if="item.status == 2" class="info info2">已提交</div>
            </div>
            <div class="left_item">发布时间：{{ item.create_time }}</div>
            <div class="left_item">提交时间：{{ item.fill_time }}</div>
            <div class="left_item">填写人：{{ item.username }}</div>
            <div class="left_item">
              问卷链接：
              <a target="_blank" :href="origin + '/#/questionNew?answer_id=' + item.id">{{
                origin + "/#/questionNew?answer_id=" + item.id
              }}</a>
            </div>
            <div class="questionnaireBox">
              <el-button
                class="btn2"
                type="primary"
                @click="questionnaireTopic(true, item.id)"
                >查看问卷</el-button
              >
            </div>
          </div>
          <div class="right">
            <div class="img">
              <div id="qrcode" :ref="'qrcode' + index"> </div>
            </div>
            <div class="text">扫描二维码填写</div>
          </div>
        </div>
      </div>
    </div>
    <div class="notBox" v-else>
      <div class="title">暂时还未有问卷记录</div>
      <el-button class="bo_primary_i" @click="addQuestion">添加问卷记录</el-button>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import topic from "@/components/topic";
import { companyAnswerList,createQuestion } from "@/api/configApi";
export default {
  data() {
    return {
      TopicType: false,
      dataList: [],
      page: 1,
      limit: 10,
      count: 0,
      answer_id: "",
      origin: "",
    };
  },
  watch: {
    company_id: {
      handler(newV, oldV) {
        this.companyAnswerList();
      },
      deep: true,
    },
  },
  props: {
    company_id: {
      type: Number,
      default: () => "",
    },
  },
  components: { topic },
  mounted() {
    this.origin = window.location.origin;
    console.log(this.origin, "this.origin");
    if (this.company_id) {
      this.companyAnswerList();
    }
  },
  methods: {
    qrCode(url, index) {
      setTimeout(() => {
        console.log(url, index, "url,index");
        let qrcodeObj = this.$refs["qrcode" + index][0];
        console.log(qrcodeObj);
        qrcodeObj.innerHTML = "";
        var qrcode = new QRCode(qrcodeObj, {
          text: url,
          width: 100,
          height: 100,
        });
      }, 0);
    },
    upData() {
      this.TopicType = !this.TopicType;
      this.companyAnswerList();
    },
    addQuestion() {
      createQuestion({
        company_id: this.company_id,
      }).then((res) => {
        this.$message.success("添加成功");
        this.companyAnswerList();
      });
    },
    companyAnswerList() {
      companyAnswerList({
        company_id: this.company_id,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.dataList = res.list;
        this.count = res.count;
        this.$nextTick(() => {
          this.dataList.map((res,index) => {
            this.qrCode(this.origin + '/#/questionNew?answer_id=' + res.id,index)
          })
        });
      });
    },
    questionnaireTopic(type, id) {
      console.log(type, id, "type");
      if (type) {
        let routerJump = this.$router.resolve({
          path: "/questionNew",
          query: { answer_id: id, read: 1 },
        });
        window.open(routerJump.href, "_blank");
      } else {
        this.$router.push({
          path: "/question",
          query: { answer_id: id },
        });
      }
    },
    loadPdf() {
      this.$refs.pdfBox.loadPdf();
    },
  },
};
</script>

<style scoped lang="less">
.operate {
  display: flex;
  justify-content: space-between;
}
.notBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40px;
    margin-top: 80px;
  }
}
.listBox {
  .listItem {
    background-color: #f3f5f9;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    padding: 15px 20px;
    .left {
      flex: 1;
      font-size: 14px;
      .left_item {
        margin-bottom: 15px;
        a {
          color: #3970fa;
          text-decoration: underline;
        }
        .info {
          background-color: #fe5f58;
          width: 55px;
          text-align: center;
          color: #fff;
          font-size: 12px;
          padding: 5px;
          border-radius: 5px;
        }
        .info1 {
          background-color: #fd9a1b;
        }
        .info2 {
          background-color: #205ffb;
        }
      }
      .questionnaireBox {
        button {
          padding: 5px 30px;
          width: 139px;
          height: 38px;
          border-radius: 19px;
          font-size: 14px;
        }
        .btn1 {
          background: #ecf5ff;
          color: #387dff;
          border: 1px solid #387dff;
        }
        .btn2 {
          background: #387dff;
          border: 1px solid #e8ecef;
        }
      }
    }
    .right {
      .img {
        background-color: #fff;
        display: flex;
        justify-content: center;
      }
      .text {
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
      }
    }
  }
}
.bo_primary_i {
  background-color: #387dff;
  color: #ffffff;
  width: 130px;
  margin-bottom: 10px;
}
@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}
</style>
